<template>
	<view class="content">
		<view class="fixed">
			<view class="head">
				<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
				<view class="header_title">抽卡机</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<swiper class="swiper-box" :indicator-dots="true" :autoplay="true">
				<swiper-item v-for="(v,i) in advert" :key='i'>
					<image class="yh_bg" :src="v.imgurl" @click="todetails(v.goods_id)"></image>
				</swiper-item>
			</swiper>
			<view class="gonggao" v-if="aa && notice_list && notice_list.length>0">
				<lff-barrage ref="lffBarrage"></lff-barrage>
			</view>

			<view class="title_ipt">
				<image :src="z_imgPath+'search.png'"></image>
				<input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(2555,255,255,0.6)"
					confirm-type="search" v-model="keyword" @confirm="show='',loadData(1)" />
				<view>搜索</view>
			</view>

			<view class="qiehuan">
				<view @click="getlist(v.id)" v-for="(v,i) in arr" :key="i">
					<view :class="show==v.id?'xzs':'wzs'">{{v.title}}</view>
					<!-- <view class="qiehuan_line" v-if="show==v.id"> </view> -->
				</view>
			</view>

			<view v-for="(item,index) in listdata" :key="index" class="qbt_con_item"
				@click="gotoPage('/pages/chouka/ka?goods_id=' + item.id)">
				<view class="list_1">
					<image :src="item.imgurl"></image>
					<view>{{item.title}}</view>
					<view class="redu_box">
						<view class="redu">
							<image :src="a" v-for="(a,b) in item.join_user" :key="b" v-if="b<10"
								:style="'transform:translateX('+-b*18+'rpx'+')'"> </image>
						</view>

						<text>{{item.join_count}}次参与</text>
					</view>

				</view>
				<view class="list_2">
					<view>{{item.title}}</view>
					<view><text>{{item.price}}</text></view>
					<!-- 元/包 -->
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'chouka/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				arr: [],
				show: 0,
				keyword: '',
				listdata: [],
				downOption: {
					auto: false
				},
				advert: [],

				// 弹幕
				notice_list: [],
				aa: false,

			}
		},


		onUnload() {
			this.aa = false

		},
		onHide() {
			clearInterval(this.timer);
			this.aa = false
			uni.setStorageSync('page', this.$mp.page.route)
		},
		onLoad(v) {
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
			this.getnews()
		},
		onShow() {
			let that = this;
			this.aa = true
			setTimeout(() => {
				that.colrdo()
			}, 500)
		},
		onShareAppMessage() {
			let that = this;
			return {
				title: "快来加入简单模玩~",
				imageUrl: that.advert[0].imgurl,
				path: "/pages/chouka/index?pid=" + uni.getStorageSync('userinfo').ID
			};
		},
		methods: {
			colrdo() { //插入一条弹幕
				let that = this;
				let a = 0;
				that.timer = setInterval(function() {
					that.$refs.lffBarrage.add({
						item: that.notice_list[a].content,
						title: that.notice_list[a].title,
						color: that.notice_list[a].color,
						headimg: that.notice_list[a].headimg
					});
					if (a < that.notice_list.length - 1) {
						a++;
					} else {
						a = 0
					}
				}, 5000)
			},
			getnews() {
				let that = this;
				that.req({
					url: 'cardextractor_index',
					Loading: true,
					success(res) {
						if (res.status == 1) {
							that.advert = res.data.advert;
							that.arr = res.data.category
						}
					}
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.loadData(page.num);
			},
			loadData(pageNo) {
				let that = this;
				that.req({
					url: 'cardextractor_goods',
					data: {
						page: pageNo,
						category_id: that.show,
						keyword: that.keyword
					},
					success(res) {
						that.mescroll.endByPage(res.data.data.length, res.data.last_page);
						if (pageNo == 1) {
							that.listdata = res.data.data;
						} else {
							that.listdata = that.listdata.concat(res.data.data);
						}
					}
				})
			},

			getlist(v) {
				this.show = v;
				this.loadData(1)
			},

		}
	}
</script>

<style>
	swiper {
		width: 100%;
		/* height: 38rpx; */
		display: flex;
		align-items: center;
	}


	.yh_bg {
		width: 750rpx;
		height: 460rpx;
	}

	.swiper-box {
		width: 750rpx;
		height: 460rpx;
		margin: 0rpx auto;
	}


	.gonggao {
		width: 750rpx;
		height: 300rpx;
		border-radius: 39rpx;
		margin: 0rpx auto;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		position: absolute;
		top: 160rpx;
		z-index: 16;
	}

	.header_title {
		height: 70rpx;
		line-height: 70rpx;
		width: 100%;
		font-weight: bold;
		box-sizing: border-box;
		color: #FFFFFF;
		text-align: center;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.fixed {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
		width: 750rpx;
		box-sizing: border-box;
		position: fixed;
		/* #ifdef MP */
		top: 0;
		/* #endif */
		/* #ifndef MP */
		top: 0rpx;
		/* #endif */
		z-index: 15;
	}


	.content {
		background: #222222;
		width: 100vw;
		/* height: 100vh; */
		box-sizing: border-box;
		position: relative;
		background-attachment: fixed;
		position: relative;
	}

	.title_ipt {
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		border-radius: 30rpx;
		padding-left: 30rpx;
		width: 652rpx;
		height: 64rpx;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 32rpx;
		box-sizing: border-box;
	}

	.title_ipt>image {
		width: 26rpx;
		height: 26rpx;
	}

	.title_ipt>input {
		width: 77%;
		height: 60rpx;
		box-sizing: border-box;
		border-radius: 105rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
		padding-left: 20rpx;
	}

	.title_ipt>view {
		width: 94rpx;
		height: 35rpx;
		background: #FF7514;
		border-radius: 18rpx;
		font-size: 23rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.qiehuan {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		/* font-family: 'zcq'; */
		font-weight: bold;
		overflow-x: scroll;
	}

	.qiehuan_line {
		margin: -10rpx auto;
		width: 50rpx;
		height: 20rpx;
		border-bottom: 4rpx solid #FF7514;
		border-radius: 2rpx;
	}


	.qiehuan>view {
		/* flex: 1; */
		text-align: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.wzs {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 1);
	}

	.xzs {
		font-size: 34rpx;
		color: #FF7514;
	}

	.qbt_con_item {
		width: 680rpx;
		margin: 20rpx auto;
	}

	.list_1 {
		width: 680rpx;
		height: 305rpx;
		border-radius: 7rpx;
		position: relative;
	}

	.list_1>image {
		width: 680rpx;
		height: 305rpx;
		border-radius: 7rpx;
	}

	.list_1>view:nth-of-type(1) {
		position: absolute;
		top: 0;
		left: 0;
		padding: 6rpx 60rpx 4rpx 20rpx;
		background: #FFFFFF;
		border-radius: 0 0 40rpx 0;
		color: #1734f4;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.redu {}

	.redu>image {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.redu_box {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(22, 22, 22, 0.6);
		width: 100%;
		border: 0 0 7rpx 7rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 60rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.list_2 {
		padding: 20rpx;
		color: #FFFFFF;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.list_2>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.list_2 text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #FF7514;
	}
</style>
